<template>
  <teleport to="#bgMessage">
    <div class="alert message-info mx-auto fixed-top w-50 d-flex justify-content-between mt-2" :class="classObj" v-if="isVisible">
      <span>{{ message }}</span>
      <button type="button" class="btn-close" aria-label="Close" @click.prevent="hide"></button>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent, PropType, ref } from 'vue'
import useDomCreate from '../hooks/useDomCreate'
export type MessageType = 'error' | 'success' | 'default'
export default defineComponent({
  props: {
    message: {
      type: String
    },
    type: {
      type: String as PropType<MessageType>,
      default: 'default'
    }
  },
  setup (props, context) {
    useDomCreate('bgMessage')
    const isVisible = ref(true)
    const classObj = {
      'alert-success': props.type === 'success',
      'alert-danger': props.type === 'error',
      'alert-warning': props.type === 'default'
    }
    const hide = () => {
      isVisible.value = false
    }
    return {
      isVisible,
      classObj,
      hide
    }
  }
})
</script>

<style scoped></style>
